import cs from 'classnames';
import styles from '../../index.module.less';
import { map } from 'lodash';
import { useState, useEffect } from 'react';
import { useRequest } from 'ahooks';
import { getCarDetail } from '@/api/modules/device';
import { RESULT_CODES } from '@/api/helper/ResultCode';
import useUrl from '@/hooks/useUrl';

export default () => {
    const { query } = useUrl();
    const detailId = query.get("detailId");
    const [carDetail, setCarDetail] = useState<any>({});
    
    const { loading, runAsync: getCarDetailAsync } = useRequest(getCarDetail, { manual: true });

    useEffect(() => {
        if (detailId) {
            getCarDetailAsync({ id: detailId }).then((res: any) => {
                if (res?.code === RESULT_CODES.SUCCESS) {
                    setCarDetail(res?.data?.vehicleInfo || {});
                }
            });
        }
    }, [detailId]);
    
    return (
        <div className={cs(styles.carDetail, styles.commonBox)}>
            <div className={styles.moduleHeader}>
                <div className={cs(styles.icon, styles.iconCar)}></div>
                <div className={styles.title}>车辆信息</div>
            </div>
            <div className={styles.detailInfo}>
                <div className={styles.carImage}>
                    <img src={carDetail?.vehicleImage || "/images/default-car-image.png"} alt="车辆图片" />
                </div>
                <div className={styles.right}>
                    <div className={styles.title}>{carDetail?.plateNo || '-'}</div>
                    <div className={styles.infoItem}>
                        <div className={styles.label}>车牌号：</div>
                        <div className={styles.value}>{carDetail?.plateNo || '-'}</div>
                    </div>
                    <div className={styles.infoItem}>
                        <div className={styles.label}>供应商：</div>
                        <div className={styles.value} title={carDetail?.supplier || '-'}>{carDetail?.supplier || '-'}</div>
                    </div>
                    <div className={styles.infoItem}>
                        <div className={styles.label}>后续任务数：</div>
                        <div className={styles.value}>{carDetail?.waitTaskCounts || 0}</div>
                    </div>
                </div>
            </div>
        </div>
    )
}